<template>
  <div id="infor">
    <nav-header
      :type="index"
      @getIndex="getNum($event)"
      @sendList="getList()"
      ref="header"
      :page="sonPage"
    ></nav-header>
    <div class="all-content">
      <div class="sidebar">
        <div class="person">
          <div class="header">
            <img :src="user.headImage" alt />
          </div>
          <div class="name">{{ user.nickName }}</div>
          <div class="introduce" :title="user.introduce">
            {{ user.introduce }}
          </div>
          <div class="tag">
            <div class="single-tag" @click="showConcern(0)">
              <div class="single-num">{{ user.followCount }}</div>
              <div class="single-type">关注</div>
            </div>
            <div class="single-tag" @click="showConcern(1)">
              <div class="single-num">{{ user.fansCount }}</div>
              <div class="single-type">粉丝</div>
            </div>
            <div class="single-tag">
              <div class="single-num">{{ user.pointCount }}</div>
              <div class="single-type">获赞</div>
            </div>
          </div>
        </div>
        <div class="btn-group">
          <div class="btn-small">
            <div class="btn" @click="sign">
              <div class="btn-icon">
                <img src="../assets/imgs/qiandao.png" alt />
              </div>
              <div class="btn-text">签到</div>
            </div>
            <div class="btn" @click="showSpecial">
              <div class="btn-icon">
                <img src="../assets/imgs/zhuanti.png" alt />
              </div>
              <div class="btn-text">专题</div>
            </div>
            <div class="btn" @click="showTag">
              <div class="btn-icon">
                <img src="../assets/imgs/biaoqian.png" alt />
              </div>
              <div class="btn-text">标签</div>
            </div>
            <div class="btn" @click="goHtml('request')">
              <div class="btn-icon">
                <img src="../assets/imgs/renzheng.png" alt />
              </div>
              <div class="btn-text">认证</div>
            </div>
          </div>
          <div class="btn-small">
            <div class="btn" @click="goHtml('gift')">
              <div class="btn-icon">
                <img src="../assets/imgs/jiasubi.png" alt />
              </div>
              <div class="btn-text">加速币</div>
            </div>
            <div class="btn" @click="goHtml('gift')">
              <div class="btn-icon">
                <img src="../assets/imgs/ygb.png" alt />
              </div>
              <div class="btn-text">荧光棒</div>
            </div>
            <div class="btn" @click="goHtml('idea')">
              <div class="btn-icon">
                <img src="../assets/imgs/help.png" alt />
              </div>
              <div class="btn-text">帮助反馈</div>
            </div>
            <div class="btn" @click="goHtml('shield')">
              <div class="btn-icon">
                <img src="../assets/imgs/pb.png" alt />
              </div>
              <div class="btn-text">屏蔽</div>
            </div>
          </div>
          <div class="black-room">
            <div class="room" @click="goHtml('black')">小黑屋</div>
            <div class="room" @click="goHtml('drafts')">草稿箱</div>
          </div>
        </div>
        <sidebar
          :tags="tags"
          @conIndex="getIndex($event)"
          ref="father"
          :defaultIndex="defaultIndex"
        ></sidebar>
      </div>
      <div class="right-content" v-if="isSpecial == 0">
        <div class="subtmitBtn" @click="goSubmit">
          <img src="../assets/imgs/qb.png" alt class="read" />
          发布点评
        </div>
        <div class="new">最新动态推荐~</div>
        <div v-if="res.articleShow" v-loading="loading">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="article-top">
              <div class="headerCtn">
                <div class="article-header" @click="goUp(item.articleUserid)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="article-right">
                <div class="article-name">
                  <span>{{ item.nickName }}</span>
                  <div class="stars" v-if="item.award">
                    <div
                      class="singleStar"
                      v-for="itemStar in item.award + 1"
                      :key="itemStar"
                    >
                      <img src="../assets/imgs/hb.png" alt />
                    </div>
                  </div>
                </div>
                <div class="article-date">{{ item.updateTime }}</div>
              </div>
              <div
                class="collect"
                @click="showCollect(item.articleId)"
                v-if="ctnIndex != 1"
              >
                <img src="../assets/imgs/collect.png" alt />
              </div>
              <div
                class="collect deleteArt"
                v-else
                @click="deleteArt(item.articleId)"
              >
                删除
              </div>
              <div class="collectModal" v-if="item.showCollect">
                <div
                  class="shiled-text"
                  @click="shieldUser(item.articleUserid)"
                >
                  屏蔽该用户
                </div>
                <div
                  class="shiled-text"
                  @click="shieldTag(item.talk)"
                  v-if="item.talk"
                >
                  屏蔽该标签
                </div>
              </div>
            </div>
            <div class="small-content" v-if="item.forward == 0">
              <div
                class="content-top"
                @click="jumpPage('artDetail', item.articleId)"
              >
                <div class="article-title">{{ item.articleTitle }}</div>
                <div class="article-content">{{ item.articleContent }}</div>
              </div>
              <viewer
                class="article-pic"
                v-if="item.articlePicture"
                :images="item.pic"
              >
                <img
                  class="single-pic"
                  v-for="itemSon in item.pic"
                  :key="itemSon.index"
                  :src="itemSon"
                />
              </viewer>
              <div class="TagCtn">
                <div
                  class="articleTag TagModule"
                  @click="tagDetail(item.interest, item.articleInterestId)"
                >
                  #{{ item.interest }}
                </div>
                <!-- <div>{{item.talk}}</div> -->
                <SelectTag :talk="item.talk"></SelectTag>
              </div>
              <div class="article-btn">
                <div
                  class="btn-single"
                  @click="getFavor(item.articleId, item.articleUserid)"
                >
                  <div class="btn-icon cupIcon">
                    <img src="../assets/imgs/dz.png" v-if="item.isPoint == 0" />
                    <img src="../assets/imgs/hz.png" v-else />
                  </div>
                  <div class="btn-number">{{ item.pointCount }}</div>
                </div>
                <div
                  class="btn-single"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="btn-icon detail">
                    <img src="../assets/imgs/hf.png" />
                  </div>
                  <div class="btn-number">{{ item.commentCount }}</div>
                </div>
                <div class="btn-single" @click="forwardBtn(item.articleId)">
                  <div class="btn-icon zhuanfa">
                    <img src="../assets/imgs/zf.png" />
                  </div>
                  <div class="btn-number">{{ item.forwardCount }}</div>
                </div>
                <div class="btn-single btnFx">
                  <Copy :artId="item.articleId"></Copy>
                </div>

                <div class="reportBtn" @click="showReport(item.articleId)">
                  <div class="reportIcon">
                    <img src="../assets/imgs/jubaoIcon.png" alt />
                  </div>
                  <span class="reportText">举报</span>
                </div>
              </div>
            </div>
            <div class="small-content" v-else>
              <div class="forwardText" v-if="item.forwardContent != ''">
                {{ item.forwardContent }}
              </div>
              <div
                class="forwardCtn"
                @click="jumpPage('artDetail', item.getForwardArticleId)"
              >
                <div class="forwardImg">
                  <img :src="item.getForwardHeadImage" alt />
                </div>
                <div class="forwardTitle">{{ item.articleTitle }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
      <div class="right-content special" v-else-if="isSpecial == 1">
        <span class="specialSpan">专题列表</span>
        <div class="specialCtn">
          <div
            class="singleTag"
            v-for="(item, index) in interList"
            :key="index"
            @click="tagDetail(item.tagName, item.tagId)"
          >
            <div class="singleTop">
              <img :src="item.tagPicture" />
            </div>
            <div class="singleCtn">
              <div class="singleTitle">{{ item.tagName }}</div>
              <div class="singleIntro">{{ item.tagContent }}</div>
            </div>
            <div class="singleDate">2020-04-12</div>
          </div>
          <div class="singleTag">
            <div class="singleTop" @click="addInterest">
              <img src="../assets/imgs/other.png" alt />
            </div>
            <div class="singleCtn">
              <div class="singleTitle">关注更多</div>
              <div class="singleIntro">想增加奇怪的知识</div>
            </div>
            <div class="singleDate">2020-04-12</div>
          </div>
        </div>
      </div>
      <div class="right-content" v-else-if="isSpecial == 2">
        <PersonModal :modalIndex="concernIndex"></PersonModal>
      </div>
      <div class="right-content" v-else-if="isSpecial == 3">
        <ConcernTag :refresh="tagRefresh"></ConcernTag>
      </div>
    </div>
    <div class="paging" v-if="res.articleShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        :current-page.sync="currentPage"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <ShieldModal
      :shieldTalk="shieldTalk"
      ref="shield"
      @refresh="getList"
    ></ShieldModal>
    <Report ref="report" :reportId="reportId"></Report>
    <Code ref="codeModal"></Code>
    <ForwardModal ref="forward" :listId="listId"></ForwardModal>
    <sign ref="sign"></sign>
    <nav-footer ref="child"></nav-footer>
    <InterestTag ref="interest"></InterestTag>
  </div>
</template>
<script>
import defaultImg from "../assets/imgs/default.png";
import NavHeader from "../components/Header";
import SelectTag from "../components/SelectTag";
import NavFooter from "../components/Footer";
import Sidebar from "../components/Sidebar";
import Submit from "../components/Submit";
import Sign from "../components/Sign";
import PersonModal from "../components/PersonModal";
import ForwardModal from "../components/ForwardModal";
import Copy from "../components/Copy";
import ConcernTag from "../components/ConcernTag";
import InterestTag from "../components/InterestTag";
import Report from "../components/Report";
import Code from "../components/Code";
import ShieldModal from "../components/Shieldmodal";
import axios from "axios";
export default {
  data() {
    return {
      index: "index",
      tags: [
        { name: "个性推荐", id: 0 },
        { name: "我的点评", id: 1 },
        { name: "我的评论", path: "comment", id: 2 },
        { name: "我的收藏", path: "collect", id: 3 },
        { name: "我的转发", path: "share", id: 4 },
        { name: "我的邀请码", id: 5 },
      ],
      loading: true,
      interList: [],
      defaultIndex: 0,
      ctnIndex: 0,
      isQuestion: false,
      user: "",
      artList: [],
      list: "",
      isSpecial: 0,
      res: "",
      collectModal: false,
      totalPage: 0,
      currentPage: 1,
      count: 0,
      sonPage: 1,
      concernIndex: 0,
      listId: 0,
      modalType: 0,
      tagRefresh: true,
      reportId: 0,
      currentSize: 1,
      shieldTalk: "",
      shieldId: "",
      sidebarIndex: null,
    };
  },

  components: {
    NavHeader,
    Sidebar,
    Submit,
    NavFooter,
    Sign,
    PersonModal,
    ForwardModal,
    Copy,
    InterestTag,
    ConcernTag,
    Report,
    Code,
    SelectTag,
    ShieldModal,
  },
  watch: {
    //监听路由,
    $route() {
      this.defaultIndex = this.$route.query.index * 1;
      if (this.defaultIndex == 1) {
        //调用子组件的方法
        this.$refs.father.sel(1);
      }
    },
  },
  created() {
    //根据索引值展示板块
    this.$route.meta.keepAlive = true;
    if (this.$route.query.index != void 0) {
      this.defaultIndex = this.$route.query.index * 1;
      this.ctnIndex = this.$route.query.index * 1;
    }

    //展示已关注专题列表
    this.concernInterest();
    this.userInformation();
    switch (this.defaultIndex) {
      case 0:
        this.init(`/laiwen/article/frontend/tlist`, "articleList", 1);
        break;
      case 1:
        this.init(`/laiwen/article/frontend/mlist`, "list", 1);
        break;
    }
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    init(url, listName, page) {
      this.loading = true;
      this.$fetch(`${url}?page=${page}&limit=20`, {}).then((res) => {
        this.loading = false;
        this.totalPage = res.totalPages * 1;
        this.count = res.count * 1;
        this.res = res;
        this.$set(res, "articleShow", true);
        this.artList = res[listName];
        for (let i of this.artList.keys()) {
          this.$set(this.artList[i], "show", true);
          //处理图片数组
          let picArray = [];
          picArray = this.artList[i].articlePicture.split(",").filter((e) => e);
          this.$set(this.artList[i], "pic", picArray);
          //处理收藏模态窗
          this.$set(this.artList[i], "showCollect", false);
        }
        //list为空的样式处理
        if (this.artList.length == 0) {
          this.$set(res, "articleShow", false);
        }
      });
    },
    getList() {
      this.init(`/laiwen/article/frontend/tlist`, "articleList", 1);
    },
    userInformation() {
      //展示用户信息
      this.$fetch("/laiwen/user/frontend/user", {}).then((res) => {
        this.user = res.user;
        this.defaultInfor(this.user, "headImage", defaultImg);
        this.defaultInfor(this.user, "nickName", "暂时没有昵称");
      });
    },
    // 移除模态窗
    getShow() {
      this.isQuestion = this.$refs.question.isFather;
    },
    //展示已关注专题
    concernInterest() {
      this.$fetch("/laiwen/interest/frontend/ilist", {}).then((res) => {
        this.interList = res.list;
      });
    },
    //显示标签
    showTag() {
      this.isSpecial = 3;
      this.res.articleShow = false;
      this.tagRefresh = !this.tagRefresh;
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //切换到关注和粉丝
    showConcern(index) {
      this.concernIndex = index;
      this.isSpecial = 2;
      this.res.articleShow = false;
    },
    //展示收藏的模态窗
    showCollect(id) {
      this.shieldId = id;
      let res = [...this.artList].find((item) => item.articleId == id);
      res.showCollect = !res.showCollect;
    },
    //触发转发模态窗
    forwardBtn(e) {
      this.listId = e;
      this.$refs.forward.showModal();
    },
    //转发后的列表加载
    forwardPage({ e, size }) {
      if (e == 0) {
        //个性推荐
        this.init(`/laiwen/article/frontend/tlist`, "articleList", size);
      }
      if (e == 2) {
        this.init(`/laiwen/article/frontend/mlist`, "list", size);
      }
    },
    //收藏
    collect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      this.showCollect(id);
      let collect = {};
      this.$set(collect, "getCollectId", res.articleUserid);
      this.$set(collect, "collectPostId", res.articleId);
      this.$post(`/laiwen/collect/frontend/save`, collect).then((val) => {
        if (res.isCollect == 0) {
          res.isCollect = 1;
          this.$message.success("收藏成功");
        } else {
          res.isCollect = 0;
          this.$message("取消收藏");
        }
      });
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },
    //屏蔽标签
    shieldTag(talk) {
      this.shieldTalk = talk;
      this.$refs.shield.show();
      this.showCollect(this.shieldId);
    },
    //屏蔽用户
    shieldUser(userid) {
      this.$fetch(
        `/laiwen/hate/frontend/save?hateTalk=${""}&hateUserId=${userid}`
      ).then((res) => {
        if (res.code == 0) {
          this.$message.success(`屏蔽成功`);
          this.getList();
        }
      });
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
      this.isSpecial = 0;
      //清除路由的Index参数
      this.$router.push({ query: {} });
      //重置分页
      this.currentPage = 1;
      console.log(e);
      if (e == 0) {
        //个性推荐
        this.init(`/laiwen/article/frontend/tlist`, "articleList", 1);
        this.$store.commit("changePage", 0);
      }
      //我的点评
      if (e == 1) {
        this.init(`/laiwen/article/frontend/mlist`, "list", 1);
        this.$store.commit("changePage", 2);
      }
      if (e > 1 && e < 5) {
        let res = [...this.tags].find((item) => item.id == e);
        let name = res.path;
        this.$router.push({
          path: `/${name}`,
        });
      }
      if (e >= 5) {
        this.$refs.codeModal.clear();
      }
    },

    //获取头部模态窗的索引值
    getNum(e) {
      this.ctnIndex = e;
    },
    //点击专题
    showSpecial() {
      this.isSpecial = 1;
      this.res.articleShow = false;
    },
    //跳转页面
    goHtml(e) {
      this.$router.push({
        path: `/${e}`,
      });
    },
    jumpPage(path, id) {
      this.navigate(path, id);
    },
    //增加专题
    addInterest() {
      this.$refs.interest.showModal();
      //加载关注兴趣
      this.isFinish = true;
    },
    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
    //专题详情
    tagDetail(name, id) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/tag",
        query: { name: `${name}`, id: `${id}` },
      });
    },
    //标签详情
    favorDetail(name) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
    //签到
    sign() {
      this.$refs.sign.showModal();
    },
    //删除文章
    deleteArt(id) {
      let that = this;
      that
        .$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .$post(`/laiwen/article/frontend/delete?articleId=${id}`, {})
            .then((res) => {
              //重置列表
              this.init(
                `/laiwen/article/frontend/mlist`,
                "list",
                this.currentSize
              );
            });
          that.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分页方法
    changePage(size) {
      this.currentSize = size;
      this.$store.commit("changeSize", size);
      switch (this.ctnIndex) {
        case 0:
          this.init(
            `/laiwen/article/frontend/tlist`,
            "articleList",
            this.currentSize
          );
          break;
        case 1:
          this.init(`/laiwen/article/frontend/mlist`, "list", this.currentSize);
          break;
      }
    },
    getList() {
      this.init(`/laiwen/article/frontend/tlist`, "articleList", 1);
    },
    goSubmit() {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({ path: "/editor" });
    },
  },
  //路由离开时执行
  beforeRouteLeave(to, from, next) {
    if (to.name !== "artDetail") {
      from.meta.isBack = false;
    }
    next();
  },
  //是否刷新页面keep-alive
  activated() {
    if (!this.$route.meta.isBack) {
      //重置页数和url,用户信息,首页状态
      this.isSpecial = 0;
      this.currentPage = 1;
      this.$refs.father.sel(0);
      this.userInformation();
    }
  },
};
</script>

<style scoped src="../assets/css/index.css"></style>
